<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/public/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE 8]>
<html lang="zh" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>管理系统</title>
<meta name="decorator" content="decList" />
<script type="text/javascript">
	//JS全局变量
	//初始时为全局配置文件制定值，有change事件
	var pageSize = "${query.pageSize}";
	//是否分页，默认为分页，有change事件
	var isPaginationValue = true;
	//总记录数
	var totalSize = 0;
	$(document).ready(function(){
		//===========注册事件  begin=================================
		//
		$('#btnAddDept').click(function(){
			addDept();
		});

		$("#chkbxIsPagination").change(function(){
			if ($("#chkbxIsPagination").is(":checked")) {//选中  
				isPaginationValue = false;//勾选表示不分页
			} else {
				isPaginationValue = true;
			}
		});
		//注册查询点击事件
		$('#btnSearchFormSubmit').click(function(){
			to_page(1);
		});
		//是否删除，下拉时自动查询
		$('#slctIsDeleted').change(function(){
			to_page(1);
		});

		//===========注册事件  end=================================
		//页面加载完成后获取第一页数据	
		to_page(1);

	});

	/*
		函数名：to_page(pageNum)
		说明：ajax数据列表显示入口，JSON 数据对应后台Query.java 属性
		参数：pageNum：页号
		调用示例：to_page(5)//加载第5页
		其他说明：每次获取页面均会将查询等条件提交到后台
		pageSize：从全局变量获取
		isPaginationValue：全局变量获取
		extend：通过表单转换
	 */
	function to_page(pageNum){
		//加载遮罩====begin=======
		var startTime = new Date();//调用开始时间
		var Dialog2 = CommonUtils.DialogUtil;
		Dialog2.setLoading(1);//1读取，2提交
		Dialog2.setTitle("-");
		Dialog2.show();
		//加载遮罩====begin=======
		var extend = getFormJson("searchForm");
		$.ajax({
			url : "${basePath}/upms/dept/list",
			data : {
				"pageNum" : pageNum,
				"pageSize" : pageSize,
				"isPagination" : isPaginationValue,
				"extend" : extend
			},
			type : "POST",
			dataType : "json",
			success : function(result){
				console.log(result);
				$("#tableDataList tbody").empty();//清空数据区
				$("#divPageNavArea").empty();
				//加载列表数据
				loadDataList(result);
				//加载分页信息
				if (totalSize != 0) {
					loadPageInfo(result);
				}
				//加载查询条件
				//loadQueryInfo(result);
				//加载其他信息
				//loadOtherInfo(result);
				Dialog2.hide();//加载完后关闭遮罩
				window.setTimeout(function(){
					//modal-open  去除属性回复滚动条
					$("body").removeClass("modal-open");
				}, 620);
			},
			error : function(){
				alert('调用ajax 失败');
			}
		});
	}

	//加载列表数据
	function loadDataList(result){
		//console.log("hotdog2============="+result);
		totalSize = result.extend.pageInfo.total;//总记录数赋给全局变量
		if (totalSize == 0) {
			var nodateTd = $("<td colspan=\"11\"></td>").append("<p class=\"text-danger\">没有显示的数据</p>");
			//载入到tbody中
			$("<tr></tr>").append(nodateTd).appendTo("#tableDataList tbody");
		} else {
			var depts = result.extend.pageInfo.list;
			$.each(depts, function(index , item){
				var checkbox = $("<td><input type=\"checkbox\" name=\"check-list\" /></td>");
				var id = $("<td></td>").append(item.id);
				var deptCode = $("<td></td>").append(item.deptCode);
				var reserved1 = $("<td></td>").append(item.reserved1);
				var deptName = $("<td></td>").append(item.deptName);
				var remarks = $("<td></td>").append(item.remarks);
				var createTime = $("<td></td>").append(item.createTime);
				var isyx = $("<td></td>").append("有效");
				var seqno = $("<td></td>").append(item.seqno);
				var pp = $("<td></td>").append("匹配");
				//查看按鈕btn btn-xs btn-primary
				var readBtn = $("<button></button>").addClass("btn btn-xs btn-primary read_btn").append($("<li></li>").addClass("fa fa-eye")).append(
						"查看");
				//查看-点击事件
				readBtn.click(function(){
					readDept(item.reserved5);
				});
				//修改按鈕
				var editBtn = $("<button></button>").addClass("btn btn-xs btn-primary edit_btn").append(
						$("<li></li>").addClass("fa fa-pencil-square-o")).append("修改");
				//编辑-点击事件
				editBtn.click(function(){
					editDept(item.reserved5);
				});
				//刪除按鈕
				var delBtn = $("<button></button>").addClass("btn btn-xs btn-danger delete_btn").append("删除");
				//删除-点击事件
				delBtn.click(function(){
					deleteDept(item.reserved5, "确认删除“" + item.deptName + "”");
				});
				var btnTd = $("<td></td>").append(readBtn).append(" ").append(editBtn).append(" ").append(delBtn);
				//载入到tbody中
				$("<tr></tr>").append(checkbox).append(id).append(deptCode).append(reserved1).append(deptName).append(remarks).append(createTime)
						.append(isyx).append(seqno).append(pp).append(btnTd).appendTo("#tableDataList tbody");
			});
		}
	}

	/*
		 函数名：loadPageInfo(result)
	 	说明：加载ajax返回的列表数据
	 	参数：result：ajax返回值
	 	调用示例：
	 */
	function loadPageInfo(result){
		//========构建每页记录数下拉 begin=================
		var size = result.extend.pageInfo.size;//分页插件返回的每页记录数
		var sizeSelect = $("<select></select>");
		var sizeValue = 0;
		for (var i = 0; i < 9; i++) {
			if (i <= 5) {
				sizeValue = sizeValue + 5;//第一个是5
			} else {
				sizeValue = sizeValue + 10;//后面的递增10
			}
			if (sizeValue == pageSize) {
				//数据匹配是为选中
				sizeSelect.append("<option  selected=\"selected\"  value=\""+sizeValue+"\">" + sizeValue + "</option>");
			} else {
				sizeSelect.append("<option   value=\""+sizeValue+"\">" + sizeValue + "</option>");
			}
		}
		sizeSelect.addClass("g-pages");
		sizeSelect.attr("id", "sizeSelect").attr("name", "sizeSelect").attr("onchange", "sizeSelectChange()").attr("size", "1");
		//========构建每页记录数下拉    end=================
		var nav_div = $("<div></div>").addClass("dataTables_info pull-left");
		if (isPaginationValue && totalSize != 0) {
			nav_div.append("当前第" + result.extend.pageInfo.pageNum + "页-共" + result.extend.pageInfo.pages + "页-每页").append(sizeSelect).append(
					"条-总" + totalSize + "条记录");
		} else {
			nav_div.append("当前第1页-共1页").append("-总" + totalSize + "条记录");
		}

		nav_div.attr("aria-live", "polite").attr("role", "status").attr("id", "table_info");
		//构建页码导航
		var nav_ul = $("<ul></ul>").addClass("pagination pull-right");
		//构建：首页li
		var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
		//构建：上一页li		
		var prePageLi = $("<li></li>").append($("<a></a>").append("上一页").attr("href", "#"));
		if (result.extend.pageInfo.hasPreviousPage == false) {
			//无上一页时，首页和上一页均不能点击
			firstPageLi.addClass("disabled");
			prePageLi.addClass("disabled");
		} else {
			//为元素添加点击翻页的事件
			firstPageLi.click(function(){
				//点击首页
				to_page(1);
			});
			prePageLi.click(function(){
				//点击上一页
				to_page(result.extend.pageInfo.pageNum - 1);
			});
		}
		//构建：下一页li
		var nextPageLi = $("<li></li>").append($("<a></a>").append("下一页").attr("href", "#"));
		//构建：末页li
		var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
		if (result.extend.pageInfo.hasNextPage == false) {
			nextPageLi.addClass("disabled");
			lastPageLi.addClass("disabled");
		} else {
			nextPageLi.click(function(){
				//点击下一页
				to_page(result.extend.pageInfo.pageNum + 1);
			});
			lastPageLi.click(function(){
				//点击末页
				to_page(result.extend.pageInfo.pages);
			});
		}
		//添加：首页li和前一页li 
		nav_ul.append(firstPageLi).append(prePageLi);
		if (isPaginationValue && totalSize != 0) {
			//分页查询时，遍历添加页码
			$.each(result.extend.pageInfo.navigatepageNums, function(index , item){
				//构建：页码li
				var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "#"));
				if (result.extend.pageInfo.pageNum == item) {
					numLi.addClass("active");
				}
				numLi.click(function(){//点击页码
					to_page(item);
				});
				//添加：页码li
				nav_ul.append(numLi);
			});
		}
		//添加：下一页li和末页 li
		nav_ul.append(nextPageLi).append(lastPageLi);
		//载入页码导航区域
		$("#divPageNavArea").append(nav_div).append(nav_ul);
	}

	//加载查询条件
	function loadQueryInfo(result){
	}
	//加载其他信息
	function loadOtherInfo(result){
	}
	//改变每页记录条数函数
	function sizeSelectChange(){
		pageSize = $("#sizeSelect").val();//为全局变量赋值
		//改变每页显示记录的值是，重新查询显示第一页
		to_page(1);
	}

	//新增机构
	function addDept(){
		CommonUtils.DialogUtil.showFrame("新增机构", "${basePath}/upms/dept/add", {
			w : 800,
		});
	}

	//删除机构（弹出提示）
	function deleteDept(cryptId , tips){
		var actionPath = "${basePath}/upms/dept/delete";
		CommonUtils.DialogUtil.setTitle("提示");
		CommonUtils.DialogUtil.setMsg(tips);
		CommonUtils.DialogUtil.setAlertClass(4);
		CommonUtils.DialogUtil.setButton('<button class="btn btn-danger" style="margin-right:20px" onclick="delDataAjax(\'' + actionPath + '\',\''
				+ cryptId + '\')"><i class="fa fa-times"></i>&nbsp;删除</button><button class="btn btn-primary" data-dismiss="modal">放弃删除</button>');
		CommonUtils.DialogUtil.show();
	}

	//编辑机构打开弹窗，{w: 900,h:600}定义弹窗宽度/高度，默认必须带一个属性
	function editDept(cryptId){
		CommonUtils.DialogUtil.showFrame("修改机构信息", "${basePath}/upms/dept/update?deptid=" + cryptId, {
			w : 800
		});
	}
	//查看机构
	function readDept(cryptId){
		CommonUtils.DialogUtil.showFrame("查看机构信息", "${basePath}/upms/dept/read/" + cryptId, {
			w : 800
		});
	}

	//关闭模态弹窗
	function closeDialog(){
		CommonUtils.DialogUtil.closeFrame();
	}

	//删除ajax调用
	function delDataAjax(actionPath , cryptId){
		CommonUtils.AjaxUtil.RockAjax(actionPath + '/' + cryptId, '', {
			submitType : "GET",
			lazyTime : 1000,
			msgTitle : "操作结果",
			msg : "删除成功",
			wrong : "删除失败wrong",
			error : "删除失败error：",
			successCallback : function(){
				//删除后从新加载第一页
				to_page(1);
			}
		//completeCallback:function(){alert('完成回调');}
		});
	}

	/*
		 函数名：getFormJson(frm)
	 	说明：通用函数，用于将表单里的属性序列化为json字符串，key为表单name值
	 	参数：frm：表单ID
		调用示例：getFormJson("searchForm")//返回查询区的json串
	 */
	function getFormJson(frm){
		var o = {};
		var a = $("#" + frm).serializeArray();
		$.each(a, function(){
			if (o[this.name] !== undefined) {
				if (!o[this.name].push) {
					o[this.name] = [ o[this.name] ];
				}
				o[this.name].push(this.value || '');
			} else {
				o[this.name] = this.value || '';
			}
		});
		return o;
	}
</script>
</head>
<body>
	<div class="contentpanel">
		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-btns">
					<a href="#" class="minimize">−</a>
				</div>
				<h4 class="panel-title">查询条件</h4>
			</div>
			<div class="panel-body">
				<form id="searchForm" action="/dddddddddddd" class="form-horizontal" method="post">
					<div class="row">
						<div class="col-sm-6 col-md-4">
							<div class="form-group m-b-15">
								<label for="input1" class="control-label col-xs-5">机构号：</label>
								<div class="col-xs-7">
									<input type="text" id="deptCode" name="deptCode" class="form-control" placeholder="精确匹配" />
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-4">
							<div class="form-group m-b-15">
								<label for="input1" class="control-label col-xs-5">机构名称：</label>
								<div class="col-xs-7">
									<input type="text" id="deptName" name="deptName" class="form-control" placeholder="模糊匹配" />
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-4">
							<div class="form-group m-b-15">
								<label for="select1" class="control-label col-xs-5">
									<span class="text-danger">*</span>
									是否删除：
								</label>
								<div class="col-xs-7">
									<select id="slctIsDeleted" name="isDeleted" class="form-control">
										<option value="0" <c:if test="${query.extend.isDelete=='0'}">selected="selected"</c:if>>未删除</option>
										<option value="1" <c:if test="${query.extend.isDelete=='1'}">selected="selected"</c:if>>已删除</option>
									</select>
								</div>
							</div>
						</div>
						<div class="col-sm-6 col-md-4 pull-right text-right">
							<button id="btnSearchFormSubmit" type="button" class="btn btn-primary">
								<i class="fa fa-search"></i>
								查询
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-btns">
					<a id="btnAddDept" class="btn btn-xs btn-info">
						<i class="fa fa-plus" aria-hidden="true"></i>
						新增机构
					</a>
				</div>
				<h5 class="panel-title">
					<input id="chkbxIsPagination" name="isPagination" value="false" type="checkbox" />
					查询结果
				</h5>
			</div>
			<div class="panel-body">
				<div class="table-responsive">
					<table id="tableDataList" class="table table-bordered table-striped table-hover table-condensed">
						<thead>
							<tr>
								<th>
									<input type="checkbox" name="check-all" />
								</th>
								<th>序号</th>
								<th>机构号</th>
								<th>机构简称</th>
								<th>全称</th>
								<th>备注</th>
								<th>创建时间</th>
								<th>是否有效</th>
								<th>顺序号</th>
								<th>匹配</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
					<div id="divPageNavArea"></div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>